<template>
  <div class="slider-image-page">
    <div class="slider-image-page-bg"></div>
    <div id="wowslider-container1">
      <div class="ws_images">
        <ul>
          <li><img src="../../../assets/image/slider/1.jpg" alt="1" title="1" id="wows1_0" /></li>
          <li><img src="../../../assets/image/slider/2.jpg" alt="2" title="2" id="wows1_1" /></li>
          <li><img src="../../../assets/image/slider/3.jpg" alt="3" title="3" id="wows1_2" /></li>
          <li><img src="../../../assets/image/slider/4.jpg" alt="4" title="4" id="wows1_3" /></li>
          <li><img src="../../../assets/image/slider/5.jpg" alt="5" title="5" id="wows1_4" /></li>
          <li><img src="../../../assets/image/slider/6.jpg" alt="6" title="6" id="wows1_5" /></li>
        </ul>
      </div>
    </div>
    <div class="slider-image-page-body" :class="classObj">
      <div class="info-body-inner">
        <div class="inner-logo" @click="handleInner">
          <img src="" alt="">
        </div>
        <div class="wow swing welcome" data-wow-duration="2s" data-wow-delay="5s"
        data-wow-offset="10" data-wow-iteration="3">
          Hello, welcome to here</div>
        <div class="wow bounce my-role" data-wow-duration="2s" data-wow-delay="5s"
        data-wow-offset="10" data-wow-iteration="1">一名前端开发工程师</div>
        <div class="my-info">Life doesn't get easier, you just get stronger</div>
      </div>
    </div>
  </div>
</template>
<script>
import { WOW } from 'wowjs';
import { mapState } from 'vuex';
import ResizeMixin from '@/utils/mixin/ResizeHandler'; // get token from cookie

export default {
  name: 'SliderImage',
  computed: {
    ...mapState({
      device: state => state.app.device,
    }),
    classObj() {
      console.log('SliderImage=', this.device);
      return {
        mobile: this.device === 'mobile',
      };
    },
  },
  mixins: [ResizeMixin],
  mounted() {
    const arr = [{ src: './js/wowslider.js' }, { src: './js/script.js' }];
    arr.forEach((ele) => {
      const scriptEle = document.createElement('script');
      scriptEle.src = ele.src;
      const x = document.getElementsByTagName('head')[0];
      x.insertBefore(scriptEle, x.firstChild);
    });
    const options = {
      boxClass: 'wow',
      animateClass: 'animated',
      offset: 0,
      mobile: true,
      live: false,
    };
    const wow = new WOW(options);
    wow.init();
  },
  methods: {
    handleInner() {
      this.$router.push({ path: '/my/userInfo' });
    },
  },
};
</script>

<style  lang="scss" scoped>
.slider-image-page {
  width: 100%;
  height: calc(100vh);
  position: relative;
  overflow: hidden;
  background: url(../../../assets/image/bg/body-bg.jpg) repeat;
  /deep/ .ws_controls {
    display: none;
  }
  .slider-image-page-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: #e2e2e2;
    opacity: 0.4;
  }
  .slider-image-page-body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    .info-body-inner {
      width: 600px;
      height: 400px;
      background-color: transparent;
      cursor: pointer;
      transition: 0.6s;
      -webkit-transition: 0.6s;
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      padding: 50px 0 30px;
      &:hover {
        background: radial-gradient(
          circle at 80px 40px,
          #ffffff,
          rgba(0, 0, 0, 0)
        );
        // background-color: #ffffff;
        opacity: 0.5;
        box-shadow: 0 0 30px #111111;
      }
      .inner-logo {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        box-shadow: 0 0 15px #111111;
        position: relative;
        margin-bottom: 10px;
        border-radius: 50%;
        text-align: center;
        -webkit-transition: all 1s;
        transition: all 1s;
        &:hover:after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          -webkit-animation: ripple 1.3s ease-out 75ms;
          animation: ripple 1.3s ease-out 75ms;
        }
      }
      .welcome {
        font-size: 40px;
      }
      .my-role {
        font-size: 20px;
        margin-bottom: 10px;
      }
      .my-info {
        font-size: 24px;
        color: #333;
      }
    }
  }
  .mobile{
    .welcome{
      font-size:14px !important;
    }
  }
}
@-webkit-keyframes ripple {
  0% {
    opacity: 0.3;
  }

  40% {
    -webkit-box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3),
      0 0 10px 10px #14a6ec, 0 0 0 10px rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3), 0 0 10px 10px #14a6ec,
      0 0 0 10px rgba(255, 255, 255, 0.5);
    opacity: 0.5;
  }

  100% {
    -webkit-box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3),
      0 0 10px 10px #14a6ec, 0 0 0 10px rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3), 0 0 10px 10px #14a6ec,
      0 0 0 10px rgba(255, 255, 255, 0.5);
    opacity: 0;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
}

@keyframes ripple {
  0% {
    opacity: 0.3;
  }

  40% {
    -webkit-box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3),
      0 0 10px 10px #14a6ec, 0 0 0 10px rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3), 0 0 10px 10px #14a6ec,
      0 0 0 10px rgba(255, 255, 255, 0.5);
    opacity: 0.5;
  }

  100% {
    -webkit-box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3),
      0 0 10px 10px #14a6ec, 0 0 0 10px rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3), 0 0 10px 10px #14a6ec,
      0 0 0 10px rgba(255, 255, 255, 0.5);
    opacity: 0;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
}
</style>
